<style type="text/css">
	#editor, .ck-editor {
		/* Adjust width to the typical width in GH. */
		width: 820px !important;
	}
</style>

<div id="editor">
	<p>Mermaid snippet:</p>

	<pre>
		<code class="mermaid language-mermaid">
flowchart TB
A --> C
A --> D
B --> C
B --> D
		</code>
	</pre>

	<p>More complex case:</p>

	<pre>
		<code class="mermaid language-mermaid">
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
	John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
		</code>
	</pre>
</div>
